import React, { Component } from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
import RegisterItem from '../../Common/RegisterLoginItem/RegisterLoginItem.jsx';
//import Using ES6 syntax
import WeUI from 'react-weui';
import 'whatwg-fetch';

//import styles
import 'weui';
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/Register.css';
const {Toptips} = WeUI;
export default class  RegisterAccount extends Component{
    constructor(props){
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.NextClick = this.NextClick.bind(this);
        this.LoginClick = this.LoginClick.bind(this);
        this.state = {
            data: {
                title:"注册",
                describe:"欢迎您加入园区",
                inputName1:"手机号",
                inputName2:"验证码",
                messagesCodeTitle:"获取验证码",
                forgetPassword:"",
                buttonTitle:"下一步",
                type:"",
                phoneNumType:"",
                isForget:"0",
                showWarn: false,
                warnTimer: null,
                tipText: "",
            }
        };

    }
    componentWillMount(){
        this.state.warnTimer && clearTimeout(this.state.warnTimer);
    }
    LeftClick(){
    }
    showWarn(text) {
        this.setState({showWarn: true, tipText: text});

        this.state.warnTimer = setTimeout(()=> {
            this.setState({showWarn: false});
        }, 2000);
    }

    checkCode(phoneNum,code){
        let fromData = new FormData();
        fromData.append("code",code)
        fromData.append("mobile",phoneNum)
        fetch(getHost() + "/user/register/identify/comparison", {
            method: 'POST',
            credentials: 'include',
            body: fromData
        }).then(response => response.json()).then(json => {
            if (json.success) {
                markDataRequestFlag();
                location.hash = "/SetRegisterPassword?phoneNum="+phoneNum
                return true;
            } else {
                this.showWarn("验证失败，请重新输入");
                return;
            }
        }).catch(e => {
            this.showWarn("网络出现了点问题");
            console.log("网络出现了点问题：" + e);
        });
    }
    NextClick(phoneNum,code){ //下一步
        if(!(/^1(3|4|5|7|8)\d{9}$/.test(phoneNum))){ //手机号验证
            this.showWarn("手机号码有误");
        } else if (!code) {
            this.showWarn("请输入验证码");
        } else {
            this.checkCode(phoneNum, code);
        }
    }
    LoginClick(){ //登录
        location.hash = "/Login"
    }
    render(){
        return(
            <div>
                <NavigationBar Title="注册" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <RegisterItem data={this.state.data} callbackParent={this.NextClick}/>
                <div className="RegisterAccountDiv" onClick={this.LoginClick}>已有账号?<span style={{color:"#0088EC"}}>登录</span></div>
                <Toptips type="warn" show={this.state.showWarn}>{this.state.tipText}</Toptips>
            </div>
        )
    }
}
//属性默认值
RegisterAccount.defaultProps = {

};

//属性
RegisterAccount.propTypes = {

};